﻿@using Personalblog.Model.ViewModels;
@using PersonalblogServices.Articels.Dto
@model PostViewModel

@section head
{
    <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" />
    <link href="https://cdn.quilljs.com/1.0.0/quill.bubble.css" rel="stylesheet" />
}

<style>
    .Postbtn{
        position:fixed;
        bottom:15%;
        right:10%;
    }
    .Topup{
        color:#000000;
        font-size:18px
    }
    .feedback_area_title{
        font: normal normal 16px/35px "Microsoft YaHei";
        margin: 10px 0 30px;
    }
    .feedback_area_title:after {
        left: 80px;
        content: '';
        display: block;
        width: 100%;
        text-align: center;
        position: relative;
        bottom: 16px;
        border-bottom: 1px dashed #e9e9e9;
    }
    #editor{
        height: 250px;
    }
    .comment_input input{
        border: none;
        width: 260px;;
    }
    .comment_input input:focus {
        outline: none;
        border: none;
    }
    .comment_input input::placeholder {
        font-size: 13px;
        color: #999;
    }
    .comment_input span{
        color: #e4dddb;
    }
    .comment_btn{
        margin-top: 20px;
    }
    .comment_btn input{
        border-radius: 3px;
        height: 32px;
        padding: 0 15px;
        border: none;
        background: #409eff;
        color: #fff;
        font-size: 14px;
    }
    
    
    .feedbackItem{
        margin-bottom:20px;
    }
    .feedbackItem:before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 90px;
        display: block;
        z-index: 0;
        content: "";
        background-color: #e1e4e8;
    }
    .feedbackListSubtitle {
        clear: both;
        align-items: center;
        color: #586069;
        flex-direction: row-reverse;
        background-color: #f6f8fa;
        border: 1px solid #e9e9e9;
        border-bottom: 1px solid #e9e9e9;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        padding: 10px 20px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .feedbackListSubtitle span{
        color: #777;
        font-weight: 700;
    }
    .feedbackCon {
        padding: 10px 20px;
        min-height: 35px;
        line-height: 1.5;
        border: 1px solid #e9e9e9;
        border-top: 0;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        background: #fff;
    }
    .feedbackManage {
        width: 200px;
        text-align: right;
        float: right;
    }
    .comment_actions_link{
        color: #777;
        font-weight: 700;
        text-decoration: none;
    }
    .comment_actions:hover .comment_actions_link{
        cursor: pointer;
        color:red;
    }
    
    .feedbackListSubtitle-louzhu {
        background-color: #f1f8ff!important;
        border-bottom-color: #c0d3eb!important;
    }
</style>
@await Html.PartialAsync("Widgets/BackToTop", new BackToTopViewModel {IsShowText = false})

<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div id="sidebar" class="p-3 sticky-lg-top">
                @* <h5>Table of Contents</h5> *@
                <div class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
                    <span class="bi me-2">
                        <i class="bi bi-menu-button-wide-fill"></i>
                    </span>
                    <span class="fs-5 fw-semibold">文章目录</span>
                </div>

                <div id="post-toc-container" style="z-index:0">
                </div>
            </div>
        </div>
        <div class="col-lg-9" id="goTop">
            <header class="post-header py-3 mb-3">
                <div class="post-title h3 font-weight-bold">@Model.Title</div>
                <div class="border-bottom my-3"></div>
                <div class="post-meta">
                    <div class="d-flex justify-content-between">
                        <div>
                            发布：
                            <span>@Model.CreationTime.ToShortDateString()</span>
                            <span>@Model.CreationTime.ToString("hh:mm")</span>
                        </div>
                        <div>
                            更新：
                            @Model.LastUpdateTime.ToShortDateString()
                            @Model.LastUpdateTime.ToString("hh:mm")
                        </div>
                    </div>

                    <div class="d-flex justify-content-between">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item active">博客</li>
                                <li class="breadcrumb-item">
                                    <a asp-controller="Blog" asp-action="List"
                                       asp-route-categoryId="@Model.Category.Id">
                                        @Model.Category.Name
                                    </a>
                                </li>
                            </ol>
                        </nav>
                        <div>字数：@Model.Content.Length.ToString()</div>
                    </div>
                </div>
            </header>
            <div id="post-markdown-content" class="post-content">
                <textarea id="append-test" style="display:none;">@Model.Content</textarea>
            </div>
            <div class="my-3 text-center">
                <span style="font-size: 1.5em; color: #bababa">_EOF_</span>
            </div>
            <div class="card my-3">
                <div class="row g-0">
                    <div class="col-md-2">
                        <img src="~/images/5192045913af4a31a7988ed7077a1e0.jpg" class="img-fluid rounded-start" width="200" alt="">
                    </div>
                    <div class="col-md-10">
                        <div class="card-body">
                            <h5 class="card-title">@Model.Title</h5>
                            <div class="card-text">
                                <b>本文作者：</b> ZY 盼盼的老父亲
                            </div>
                            <div class="card-text">
                                <b>本文链接：</b>
                                <a href="@Model.Url">@Model.Url</a>
                            </div>
                            <div class="card-text">
                                <b>版权声明：</b>
                                本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/">BY-NC-SA</a> 许可协议。转载请注明出处！
                            </div>
                            <div class="card-text">
                                <b>关于博主：</b> 欢迎扫码加好友，交流技术 & 分享经验！
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="my-3">
                <span class="text-muted">
                    微信号：「ZY 盼盼的老父亲」 专注于互联网热门新技术探索与开发实践，包括架构设计、机器学习与数据分析算法、移动端开发、Linux~ 我都不会，欢迎一起探讨技术，分享学习实践经验。
                </span>
            </div>
            
            @if (Model.ConfigItem.IsShowComment)
            {
                <div class="my-3" id = "CommentList">
                <div class="feedback_area_title">
                    评论列表
                </div>
                @if (Model.CommentsList.Any())
                {
                    @foreach (var comment in Model.CommentsList)
                    {
                        if (comment.ParentCommentId == 0)
                        {
                            <div class="col flip-container">
                                <partial name="Widgets/PostComments" model="comment" />
                            </div>
                        }
                        else
                        {
                            <div></div>
                            <div class="col  flip-container">
                                <partial name="Widgets/PostCommentstwo" model="comment" />
                            </div>
                        }
                    }
                }
            </div>
            
            <div class="my-3">
                <form asp-controller="Blog" asp-action="SubComment" method="post">
                    <div class="feedback_area_title" id="reply">
                        发表评论
                    </div>
                    <div class="comment_input">
                        <input type="text" placeholder="请输入昵称..." name="Name"/>
                        <span>|</span>
                        <input type="email" placeholder="请输入邮箱..." name="Email"/>
                        <span>|</span>
                    </div>
                    <div id="editor">
                    </div>
                    <div class="hidden" hidden="hidden">
                        <textarea id="Content" name="Content"></textarea>
                        <input type="text" name="ArticleId" value="@Model.Url.Split('/').Last().Split('.').First()"/>
                        <input type="text" name="ParentCommentId" id="ParentCommentId"/>
                    </div>
                    <div class="comment_btn">
                        <input type="submit" value="发表评论"/>
                    </div>
                </form>
            </div>
            }
        </div>
    </div>
</div>
<script src="~/js/jquery.min.js"></script>
<script src="~/js/bootstrap-treeview.js"></script>
<script src="~/editormd/flowchart.min.js"></script>
<script src="~/editormd/jquery.flowchart.min.js"></script>
<script src="~/editormd/marked.min.js"></script>
<script src="~/editormd/prettify.min.js"></script>
<script src="~/editormd/raphael.min.js"></script>
<script src="~/editormd/sequence-diagram.min.js"></script>
<script src="~/editormd/underscore.min.js"></script>

<script src="~/editormd/editormd.js"></script>
<script src="~/js/blog.post.js"></script>

<script src="https://cdn.quilljs.com/1.0.0/quill.min.js"></script>
<script>
      var content = document.getElementById("Content")
      var toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
      ];
      var quill = new Quill('#editor', {
        modules: {
          toolbar: toolbarOptions
        },
        theme: 'snow'
      });
      quill.on('editor-change', function(eventName, ...args) {
        var text = quill.getContents();
        console.log(text)
        if (eventName === 'text-change') {
            content.value = JSON.stringify(text.ops)
        } else if (eventName === 'selection-change') {
            content.value = JSON.stringify(text.ops)
        }
      });
      function Reply(Id,Name){
          console.log(Id, Name)
          var ParentCommentId = document.getElementById("ParentCommentId");
          ParentCommentId.value = Id;
          quill.insertText(0, `回复给：${Name}`, 'bold', true);
      }
</script>